---
description: Хук для управления визуальным отображением фокуса при навигации с клавиатуры.
---

<Overview type="hook">

# useFocusVisible

Хук для управления визуальным отображением фокуса при навигации с клавиатуры.
Позволяет показывать стили фокуса только при клавиатурном вводе, улучшая пользовательский опыт и доступность.

</Overview>

## Обязательные условия

> Убедитесь, что ваше приложение обёрнуто в компонент [`AppRoot`](/components/app-root).

## Возвращаемое значение

Объект со свойствами:

| Свойство       | Тип                           | Описание                                                       |
| -------------- | ----------------------------- | -------------------------------------------------------------- |
| `focusVisible` | `boolean`                     | Флаг видимости фокуса (true только при клавиатурной навигации) |
| `onFocus`      | `(event: FocusEvent) => void` | Обработчик события фокуса                                      |
| `onBlur`       | `(event: FocusEvent) => void` | Обработчик события потери фокуса                               |

## Пример использования

```jsx
const AccessibleButton = () => {
  const { focusVisible, onFocus, onBlur } = useFocusVisible();

  return (
    <button
      onFocus={onFocus}
      onBlur={onBlur}
      style={{
        outline: focusVisible ? '2px solid #2D81E0' : 'none',
        transition: 'outline 0.15s ease-in',
      }}
    >
      Кнопка с умным фокусом
    </button>
  );
};

// Убедитесь, что всё приложение обёрнуто в AppRoot
const App = () => (
  <AppRoot>
    <AccessibleButton />
  </AppRoot>
);
```

## Особенности работы

- **Умное определение источника фокуса**

  Стили фокуса активируются только при навигации с помощью `Tab`/`Shift+Tab` и использовании клавиатурных стрелок.

- **Игнорирование использование мыши**

  При клике мышью фокус-стили не отображаются.

## Рекомендации

Используйте для:

- Кастомных элементов управления (кнопки, ссылки, поля ввода).
- Компонентов с собственной логикой фокуса.
- Доступных интерфейсов (`a11y`).
- Сочетайте с CSS-переходами для плавного появления фокуса.
